<template>
	<div class="root">
		<iqc-header htitle="IQC" :date="date"></iqc-header>
		<count-info :waitMatTotal="waitMatTotal"
                        :checkedDayQua="checkedDayQua"
                        :checkedDayUnq="checkedDayUnq"
                        :checkedMonthQua="checkedMonthQua"
                        :checkedMonthUnq="checkedMonthUnq"
                        :outboundDayCount="outboundDayCount"

		></count-info>

        <div class="content">
        	  <div class="content-left">
        	  	   <isqualified :list="isqualifiedList"></isqualified>
        	  </div>
        	  
        	  <div class="content-group">
        	  	   <plan :list="planList"></plan>
                   <div class="h20"></div>
        	  	   <notice noticeTitle="超时告警"></notice>
                   <div class="h20"></div>
        	  	   <stagnation :list="stagnationList" :abnormalInfo="abnormalInfo"></stagnation>
        	  </div>
        </div>
	</div>
</template>
<script>
import IqcHeader from '@/components/Header'
import CountInfo from './components/CountInfo'
import Isqualified from './components/Isqualified'
import Plan from './components/Plan'
import Notice from '@/components/Notice'
import Stagnation from './components/Stagnation'

import {getIQC,getIQCPlan} from "../../api/chart"


export default{
  components:{
	IqcHeader,
	CountInfo,
	Isqualified,
	Plan,
	Notice,
	Stagnation
  },
  data () {
     return{
         date:'',
         waitMatTotal:'',
         checkedDayQua:'',
         checkedDayUnq:'',
         checkedMonthQua:'',
         checkedMonthUnq:'',
         outboundDayCount:'',
         abnormalInfo:'',
         isqualifiedList:[],
         planList:{},
         stagnationList:[]
     }
  },
  methods:{
        getInfo () {
             getIQC().then((data) => {
                 this.date = data.date
                 this.waitMatTotal = data.inspectWait
                 this.checkedDayQua = data.dayQualified
                 this.checkedDayUnq = data.dayUnqualified
                 this.checkedMonthQua = data.monthQualified
                 this.checkedMonthUnq = data.monthUnqualified
                 this.outboundDayCount = data.unloadWait
                }).catch((error) => {
                console.log(error)
             })

            getIQCPlan().then((data) => {
                this.planList = data.msg
            }).catch((error) => {
                 console.log(error)
            })
        }
  },
  mounted () {
        clearTimeout(timer)

        this.getInfo()
        var timer = setInterval(()=>{
            this.getInfo()
        },10000)
  }
}
</script>

<style scoped>
.root{
    background:#383A53;
    width:1920px;
    height:1080px;
}
.root .content{
    width:100%;
    box-sizing:border-box;
    padding-left:30px;
    padding-right:30px;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.content .content-left,
.content .content-group{
     width:914px;
     height:770px;
}
.h20{
    width: 100%;
    height: 20px;
}
</style>

